<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - 王氏美容汽车集团管理系统'">材料统计分析 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <style>
        .dashboard-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }
        .dashboard-card:hover {
            transform: translateY(-5px);
        }
        .chart-container {
            position: relative;
            height: 400px;
        }
        .stat-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border-radius: 15px;
        }
        .alert-card {
            border-left: 4px solid #dc3545;
        }
    </style>
</head>
<body class="bg-light">
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="fas fa-car me-2"></i>王氏美容汽车集团
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/dashboard">
                            <i class="fas fa-tachometer-alt me-1"></i>仪表盘
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/dashboard/materials">
                            <i class="fas fa-boxes me-1"></i>材料统计
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/customers">
                            <i class="fas fa-users me-1"></i>客户管理
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-user me-1"></i>管理员
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/profile">个人资料</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/logout">退出登录</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-4">
        <!-- 页面标题 -->
        <div class="row mb-4">
            <div class="col">
                <h2><i class="fas fa-boxes me-2"></i>材料统计分析</h2>
                <p class="text-muted">实时监控库存状态，优化材料管理</p>
            </div>
            <div class="col-auto">
                <button class="btn btn-primary" onclick="refreshData()">
                    <i class="fas fa-sync-alt me-2"></i>刷新数据
                </button>
            </div>
        </div>

        <!-- 统计概览 -->
        <div class="row mb-4">
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-boxes fa-3x mb-3"></i>
                        <h3 class="mb-1" id="totalMaterials">0</h3>
                        <p class="mb-0">材料种类</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-exclamation-triangle fa-3x mb-3"></i>
                        <h3 class="mb-1" id="lowStockMaterials">0</h3>
                        <p class="mb-0">库存预警</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-clock fa-3x mb-3"></i>
                        <h3 class="mb-1" id="expiredMaterials">0</h3>
                        <p class="mb-0">过期材料</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 mb-3">
                <div class="card stat-card">
                    <div class="card-body text-center">
                        <i class="fas fa-dollar-sign fa-3x mb-3"></i>
                        <h3 class="mb-1" id="totalValue">¥0</h3>
                        <p class="mb-0">库存总值</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 预警信息 -->
        <div class="row mb-4">
            <div class="col-12">
                <div class="card dashboard-card alert-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0 text-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>库存预警
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-info" role="alert">
                            <i class="fas fa-info-circle me-2"></i>
                            材料管理功能正在开发中，敬请期待！
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="alert alert-warning" role="alert">
                                    <strong>库存不足:</strong> 0 种材料
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="alert alert-danger" role="alert">
                                    <strong>即将过期:</strong> 0 种材料
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="alert alert-secondary" role="alert">
                                    <strong>已过期:</strong> 0 种材料
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表区域 -->
        <div class="row mb-4">
            <!-- 材料分类分布 -->
            <div class="col-lg-6 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-pie me-2"></i>材料分类分布
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="materialCategoryChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 库存状态分布 -->
            <div class="col-lg-6 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-bar me-2"></i>库存状态分布
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="stockStatusChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 消耗趋势和供应商分析 -->
        <div class="row mb-4">
            <!-- 材料消耗趋势 -->
            <div class="col-lg-8 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-chart-line me-2"></i>材料消耗趋势
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="consumptionTrendChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 供应商分布 -->
            <div class="col-lg-4 mb-3">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-truck me-2"></i>供应商分布
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="chart-container">
                            <canvas id="supplierChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 材料详情表格 -->
        <div class="row">
            <div class="col-12">
                <div class="card dashboard-card">
                    <div class="card-header bg-white">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-table me-2"></i>材料库存详情
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>材料名称</th>
                                        <th>分类</th>
                                        <th>当前库存</th>
                                        <th>安全库存</th>
                                        <th>单价</th>
                                        <th>总价值</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="7" class="text-center text-muted">
                                            暂无材料数据
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 页面脚本 -->
    <script>
        let materialCategoryChart, stockStatusChart, consumptionTrendChart, supplierChart;

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initCharts();
            loadData();
        });

        // 初始化图表
        function initCharts() {
            // 材料分类分布图
            const materialCategoryCtx = document.getElementById('materialCategoryChart').getContext('2d');
            materialCategoryChart = new Chart(materialCategoryCtx, {
                type: 'doughnut',
                data: {
                    labels: ['洗车用品', '美容用品', '保养用品', '清洁用品', '其他'],
                    datasets: [{
                        data: [0, 0, 0, 0, 0],
                        backgroundColor: [
                            '#007bff',
                            '#28a745',
                            '#ffc107',
                            '#dc3545',
                            '#6c757d'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // 库存状态分布图
            const stockStatusCtx = document.getElementById('stockStatusChart').getContext('2d');
            stockStatusChart = new Chart(stockStatusCtx, {
                type: 'bar',
                data: {
                    labels: ['充足', '正常', '不足', '缺货'],
                    datasets: [{
                        label: '材料数量',
                        data: [0, 0, 0, 0],
                        backgroundColor: [
                            '#28a745',
                            '#17a2b8',
                            '#ffc107',
                            '#dc3545'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 材料消耗趋势图
            const consumptionTrendCtx = document.getElementById('consumptionTrendChart').getContext('2d');
            consumptionTrendChart = new Chart(consumptionTrendCtx, {
                type: 'line',
                data: {
                    labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
                    datasets: [{
                        label: '消耗金额',
                        data: [0, 0, 0, 0, 0, 0],
                        borderColor: 'rgb(75, 192, 192)',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 供应商分布图
            const supplierCtx = document.getElementById('supplierChart').getContext('2d');
            supplierChart = new Chart(supplierCtx, {
                type: 'doughnut',
                data: {
                    labels: ['供应商A', '供应商B', '供应商C', '其他'],
                    datasets: [{
                        data: [0, 0, 0, 0],
                        backgroundColor: [
                            '#6f42c1',
                            '#e83e8c',
                            '#fd7e14',
                            '#20c997'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        }

        // 加载数据
        function loadData() {
            // 加载概览数据
            fetch('/dashboard/api/overview')
                .then(response => response.json())
                .then(data => {
                    const materials = data.materials || {};
                    document.getElementById('totalMaterials').textContent = materials.total || 0;
                    document.getElementById('lowStockMaterials').textContent = materials.lowStock || 0;
                    document.getElementById('expiredMaterials').textContent = materials.expired || 0;
                    document.getElementById('totalValue').textContent = 
                        '¥' + (materials.totalValue || 0).toFixed(2);
                })
                .catch(error => console.error('加载概览数据失败:', error));

            // 加载图表数据
            fetch('/dashboard/api/material-charts')
                .then(response => response.json())
                .then(data => {
                    // 这里可以根据实际返回的数据更新图表
                    console.log('材料图表数据:', data);
                })
                .catch(error => console.error('加载图表数据失败:', error));
        }

        // 刷新数据
        function refreshData() {
            loadData();
        }

        // 定时刷新数据
        setInterval(refreshData, 60000); // 每分钟刷新一次
    </script>
</body>
</html>
